Web accessibility refers to the practice of designing websites and providing online content in a way that allows for equal access and use by everyone, including users with disabilities. In the following section we will provide some specific examples of basic accessibility practices to use, as a starting point for web content editors. This is not a comprehensive list; for technical questions please contact the IT support team specific to your program.
Webpages and documents should be given a meaningful page title. This is important because it is the first thing on a web page that is read by a screen reader. It helps users orient themselves within a website. Depending on the program, the page title may be added differently. In Word 2010 documents, you can add a document title by going to the file menu, and clicking to the right of the “title” field. In Terminal Four (the District’s content management system) the page title is taken from the page name.
Structure of a page
The structure and layout of your webpage or document should be simple and logical. This improves user experience in general, allowing for clear navigation of the page. This is also important for people using assistive technology, such as screen magnification. When a screen is magnified or zoomed in, users can see only a small portion of the screen at a time. When webpage layouts are complex or not laid out in a logical way, this can create difficulty with orientation on the page.
A screen reader can navigate through a page using headings, but this only works if headings are utilized properly.
You should never create a heading simply by increasing the font size. While this may look like an obvious heading to a sighted user, a screen reader does not interpret larger text to be a heading, so this information would be lost to a non-sighted user.
Likewise, you should never use heading styles simply for aesthetic, when you are not intending the text to be a structural heading.
Headings should be used in numeric order, beginning with heading 1, followed by heading 2, heading 3, etc. when necessary. There should be only one “heading 1” per page. You should not jump from heading 1 to heading 4, but should use headings in numeric succession.
Headings should also be informative and meaningful – avoid using the same text/words for multiple headings on one page. This will help users easily decide what content on the page they would like to read – if there are two headings that say “More information,” this does not give the user any indication of the difference in the information between each heading.
In many editing programs, headings are set by highlighting the text that you wish to become the heading, and selecting the appropriate heading level from the styles gallery (Word) or HTML editor (Terminal Four).
Alternative text (commonly referred to as “Alt text”) is the text that is read by a screen reader for a person who cannot see the image, or the text that displays if the image is broken. Alt text is not displayed on the page, but is hidden in the code. Alt text is required for all images, and should communicate the meaning of the image -- the same meaning that the image is trying to convey for a sighted user. If the image contains information, that information should be given in the text. If the image is solely decorative, the alt tag should be blank.
You should not use images of text. If text is needed, it should entered as text. This is because screen readers are not able to read images of text the way that they are able to read text on a screen.
When using complex images, such as graphs and maps, you must also provide information in a text alternative.
Color and contrast
You should not use color as the only method to denote meaning. If color is used, there should be additional information given so that users who are unable to see the color will also get the same meaning from your webpage/document. For example, you should not use language such as “click the blue button” with no other indication of which button to click.
Color contrast with background (usually white) should be high, as low contrast colors can be difficult to see for users with moderate visual impairments. Contrast should be 4.5 to 1 or higher. You can use this handy contrast checker tool to check colors you are using: http://www.msfw.com/Services/ContrastRatioCalculator.
When charts and graphs are used and color provides meaning, add texture or patterns in addition to color, as well as text, to explain the meaning.
Make link text meaningful. Think about where the link goes, and describe that. Link text that simply reads “click here” or “learn more” does not give the user any indication about where this link will go. Instead, make the link text descriptive, such as “learn more about kindergarten programs in ASD.” This is helpful for all users, and especially so for visually impaired users who can use screen reading software to have all links on a page read aloud, so that they can quickly decide where they would like to go.
Assistive technology does not need to be told that a link is a link – it knows this. You do not need to indicate this in the text, such as “click this link,” simply use descriptive text.
Links on a page or document should be unique. You should not have multiple links on one page that use the same text. For example, if you have multiple “Learn more about Kindergarten curriculum” links, they could instead be changed to “Kindergarten math curriculum” and “Kindergarten language arts curriculum.”
Additionally, you should not have multiple links on a page that go to the same location. This is unnecessarily redundant.
If a link opens a PDF, it is best practice to let users know this by typing (PDF)or (Word) at the end of the document link.
Avoid opening links in new windows, except for documents and help text.
All videos embedded on you site or linked to from your website must have closed captioning available. If content is solely visual, a text audio description should be provided as well.
Only use lists when an actual list is intended. Don’t use bullet points simply to indent text. Use numbered lists when the information is in a meaningful order, and bulleted lists when information is in no particular order.
Tables should be given a meaningful title, and at least one heading row or column (indicated by the <th> tag) to indicate what data is being associated with which row or column. Heading rows or columns should not be left blank. Information in data cells should be indicated by the <td> tag.
Tables should be used to organize data and information, and should not be used to format page elements, such as images.
Content should be clear and plain. The reading level for content should be no higher than 7-9th grade. This helps users with dyslexia, non-native English speakers, and everyone, to easily understand your content.
PDFs and other documents
Word, PDFs, and other documents shared online must also be accessible, using many of the same principles and concepts we just discussed. The specific way to edit a document to ensure accessibility will depend on the program you are using. View guides in the Tutorials section for more detailed instructions on making documents accessible.