Mass.gov was designed with accessibility at the top of mind. Learn how authors and editors can create accessible content for everyone.
Mass.gov was designed with accessibility at the top of mind. Our colors, fonts, and designs were chosen specifically with accessible use in mind, to ensure that all audiences would be able to use the content on the site.
There are factors that will make your content more easily accessible, giving your audience the best experience possible.
At a high level, here’s how to make content more accessible:
Break content into chunks that can be quickly scanned and digested
Write in plain language and avoid jargon
Use descriptive links rather than “click here”
Add alt text to images, captions to videos, and transcripts to audio or video files
Use appropriate color contrast for text
Avoid PDFs, when possible, and move content to a webpage (HTML)
Our goal should always be to make the Mass.gov website experience as accessible and inclusive to all readers as possible. According to the W3C Web Accessibility Initiative, web accessibility is the websites, tools, and technologies designed and developed so that people with disabilities can use them. Specifically, so people can:
Perceive, understand, navigate, and interact with the web
Contribute to the web
Break content into digestible chunks
Writing for accessibility is more than writing with correct spelling and grammar. It also means organizing content in a way that's scannable and readable. It means your content is understandable for everyone.
It also uses metadata to help users understand the content, no matter how they choose to browse it.
As you write, ask yourself these questions:
Would someone be able to easily translate it to their preferred language?
If someone was using a screen reader to narrate what’s on the screen, would the order and cadence make sense?
Can someone on a small device, such as a smartphone, quickly and easily scan the page to understand it at a high level?
Create a structural & visual hierarchy
Pages should only focus on a single topic. When creating a page of content, use the inverted pyramid to structure the page. This style of writing helps you focus on the most important information first, while also creating meaningful subheads to introduce new information and help users scan the page.
When using subheadings, be sure to nest appropriately:
There should only be one H1 per page, and that’s the page title
Plain language is reader-focused, using an active voice and everyday language. It uses only as many words as necessary. It’s especially helpful to people who translate content into other languages.
Avoid using overly technical jargon, especially acronyms, as often as you can. Some screen readers interpret acronyms by reading every letter individually, which can become tiresome if one is repeated often on a page. If you have to use an acronym, always define it on the first reference to give your audience context.
Reading level: Grade 6
Aim for a reading level of grade 6, and use tools like HemingwayApp to help write clearly. A grade 6 reading level is important because it:
Helps provide more accurate non-English translations
Makes content accessible to people with lower reading levels
Makes content easier to scan and digest quickly
Avoid directional language
Because websites are responsive, content changes based on the size of the screen used. Avoid using directional language such as above, below, left, or right.
Good: Select from these options.
Bad: Selection from the options below.
Use descriptive links
To help people who use screen readers understand the context of each link, be sure that the text you use for hyperlinks describes both the link’s destination and purpose. This will give constituents using screen readers the info.
Never use the words “click here” or “learn more.”
Instead, use descriptive links. These help people understand the context of the link before they click or select. Describe links that highlight the subject, not the action.
Good: Contact us for more information about our services.
Bad: Click here to contact us for more information.
Add alt text to images
Alternative text, or alt text, is an image description. It should be included on all images, graphs, and charts to tell people what an image is. When creating a page of content, make sure every image has alt text.
If it’s a creative image or stock photo, simply describe the image
If the image is a graph or chart, describe what the data shows, including important information such as highest or lowest categories
If the image is a portrait or profile, include the name of the person
Alt text also helps search engines index the images.
For embedded videos, include closed captions and a link to a transcript that describes both the written or spoken text in the video and the visual elements shown on screen. If you’re creating a video with the Mass Digital team, we’ll provide this transcript for you.
Don’t put text in images, as these can’t be read by assistive devices, such as screen readers.
Use closed captioning and transcripts
If the page you’re creating features audio or video files, make sure closed captioning and/or a transcript are available.
While YouTube and other video providers do auto-captioning, they’re often not correct. When possible, provide your own accurate captioning for accessibility.
Use HTML when possible
For documents such as PDFs, we suggest converting the document to HTML whenever possible to help ensure that all audiences are able to access and read it.
The best practices for web pages and images also extend to documents.
Break long text into digestible sections
Clearly label all links
Use alt text for images and captions for videos
Make PDFs accessible
If your document has fields that a user must fill out, be sure to make these fields interactive so that the user can fill them out using a computer. Many word processors allow you to enter tags or meta tags that screen readers will use to interpret the document, so we advise using these features whenever possible.
Abolish harmful or exclusionary language
There are many words used on the web that, at one time the standard, have started to be phased out due to their racist, gendered, or hurtful language or gendered meanings. We will follow suit, avoiding any racial, gendered, or generalized and hurtful terms. Learn more about these specific terms in the content style and editorial guide.