What use are websites that provide services if not everyone can access all its features? In a perfect world, all sites would be accessible to everyone. Many do a decent job of enabling access to people with physical, sensory, or cognitive disabilities. However, ensuring access becomes imperative when the site receives federal grant money under Section 508. Sites offering services not accessible to everyone fail in their mission.
Section 508 -- It’s All about Accessibility
Section 508 of the Rehabilitation Act addresses accessibility for people with physical, sensory, or cognitive disabilities to technology including software, websites, and media. For non-profits, this means accommodating “assistive technology” enabling use of the site by all. From screen readers to closed caption videos, removing barriers is a key part of a site’s success, not only in disseminating information but also in obtaining further funding through donations and grants. Here are some of the most important considerations in making a website accessible and section 508 compliant.
1. Define Page Areas
Dividing pages into sections makes it easier for everyone to understand and use site content. Aria (Accessible Rich Internet Applications) landmarks such as “banner”, “contentinfo,” “form,” “main,” “search,” and “navigation” assign content roles that produce a better user experience for those dependent on assistive technology. For instance, Aria landmarks allow visually impaired people using a screen reader to skip over repeated sections without having to listen to them on every page in addition to providing more streamlined navigation within the site. Using Aria-live in dynamic page sections means that after a page event enhances technology such as screen readers in presenting content closely similar to what non-impaired users experience.
2. Provide Content for Screen Readers
Some situations require providing a different set of content for screen readers, usually in an easy to read format. Aria-hidden attributes makes it possible to hide areas of pageshard for screen readers to interpret, such as a chart or graph. By presenting a hidden table that only screen readers can see that represents the data in the graph, the user obtains the information contained in the graph.
3. Use Clear Headings
Consistent heading patterns make it possible for users to grasp the different elements of a page. You may not know them by their h-1 to h-6 titles, but you see HTML headings whenever you enter a website. H-1 usually appears just once on a page, announcing its most important element. The headings diminish in size from there, facilitating emphasis of the varying degrees of importance and priority of different page sections. Structuring a page using h1-h5 tags also permits a seamless flow between elements, enhancing all users’ experiences on the site.
4. Describe Your Images
Images greatly enhance a website, both in terms of visual appeal, but also in conveying information to users. However, in order to allow users with visual impairments to obtain a similar level of content quality, all images should include an alt tag. Alt tags need not describe every facet and detail of all images and artwork on a site, but must clearly convey any important information contained in images.
5. Color Combinations
Great color combinations make attractive websites. However, certain combinations spell trouble for colorblind individuals. Additionally, using colors that lack a high enough contrast with surrounding shades may make content difficult to see. Tools exist that check contrast, such as WebAIM’s color contrast checker. The right tools help ensure that website color combinations meet WCAG (Web Content Accessibility Guidelines) AAA standards, which ensure all users are able to use color to distinguish elements and text.
6. Keyboard Friendly Inputs
Despite the proliferation of touch screen devices, the wireless mouse, and more, for many individuals, the only way they can navigate a page is using their keyboard to tab or point using directional arrows. Accessible pages contain elements properly organized with tabindex attributes. Keyboard only capability must also make use of visual indicators that clearly denote the element in focus. However, enabling keyboard only navigation requires careful organization in order to provide users with a site experience similar to that of individuals using a mouse.
7. All User Friendly Forms
A form containing incorrectly entered data is worthless and often results from poorly organized and labeled input areas. Creating labels that allow a user to understand the information required to complete each input field results in viable data. Making forms usable also includes using fieldset and legend attribute labeling with groups of radio buttons or checkboxes. It all comes down to allowing the user to have a clear understanding of the question asks so that they can provide the correct information.
8. Make Video Fully Accessible
Videos are highly effective in getting information out to people. Unfortunately, for individuals with different physical and cognitive challenges, videos sometimes lose impact due to accessibility issues. One way to increase accessibility is the implementation of video players that are accessible using closed captioning and accessible controls such as the JWPlayer, which allows users to control normal video functions and closed captioning with the keyboard. Another tactic is the use of audio describe videos, where users have the ability to toggle between normal video and audio described video.There are plenty of other ways to increase website accessibility and make sites 508 compliant. Identifying potential trouble spots is but half the battle tools are an essential part of the processof making more accessible website content. However, it takes programmers and designers who know how to address human accessibility issues to implement successful website accessibility.
Section 508 -- It’s All about Accessibility
Section 508 of the Rehabilitation Act addresses accessibility for people with physical, sensory, or cognitive disabilities to technology including software, websites, and media. For non-profits, this means accommodating “assistive technology” enabling use of the site by all. From screen readers to closed caption videos, removing barriers is a key part of a site’s success, not only in disseminating information but also in obtaining further funding through donations and grants. Here are some of the most important considerations in making a website accessible and section 508 compliant.
1. Define Page Areas
Dividing pages into sections makes it easier for everyone to understand and use site content. Aria (Accessible Rich Internet Applications) landmarks such as “banner”, “contentinfo,” “form,” “main,” “search,” and “navigation” assign content roles that produce a better user experience for those dependent on assistive technology. For instance, Aria landmarks allow visually impaired people using a screen reader to skip over repeated sections without having to listen to them on every page in addition to providing more streamlined navigation within the site. Using Aria-live in dynamic page sections means that after a page event enhances technology such as screen readers in presenting content closely similar to what non-impaired users experience.
2. Provide Content for Screen Readers
Some situations require providing a different set of content for screen readers, usually in an easy to read format. Aria-hidden attributes makes it possible to hide areas of pageshard for screen readers to interpret, such as a chart or graph. By presenting a hidden table that only screen readers can see that represents the data in the graph, the user obtains the information contained in the graph.
3. Use Clear Headings
Consistent heading patterns make it possible for users to grasp the different elements of a page. You may not know them by their h-1 to h-6 titles, but you see HTML headings whenever you enter a website. H-1 usually appears just once on a page, announcing its most important element. The headings diminish in size from there, facilitating emphasis of the varying degrees of importance and priority of different page sections. Structuring a page using h1-h5 tags also permits a seamless flow between elements, enhancing all users’ experiences on the site.
4. Describe Your Images
Images greatly enhance a website, both in terms of visual appeal, but also in conveying information to users. However, in order to allow users with visual impairments to obtain a similar level of content quality, all images should include an alt tag. Alt tags need not describe every facet and detail of all images and artwork on a site, but must clearly convey any important information contained in images.
5. Color Combinations
Great color combinations make attractive websites. However, certain combinations spell trouble for colorblind individuals. Additionally, using colors that lack a high enough contrast with surrounding shades may make content difficult to see. Tools exist that check contrast, such as WebAIM’s color contrast checker. The right tools help ensure that website color combinations meet WCAG (Web Content Accessibility Guidelines) AAA standards, which ensure all users are able to use color to distinguish elements and text.
6. Keyboard Friendly Inputs
Despite the proliferation of touch screen devices, the wireless mouse, and more, for many individuals, the only way they can navigate a page is using their keyboard to tab or point using directional arrows. Accessible pages contain elements properly organized with tabindex attributes. Keyboard only capability must also make use of visual indicators that clearly denote the element in focus. However, enabling keyboard only navigation requires careful organization in order to provide users with a site experience similar to that of individuals using a mouse.
7. All User Friendly Forms
A form containing incorrectly entered data is worthless and often results from poorly organized and labeled input areas. Creating labels that allow a user to understand the information required to complete each input field results in viable data. Making forms usable also includes using fieldset and legend attribute labeling with groups of radio buttons or checkboxes. It all comes down to allowing the user to have a clear understanding of the question asks so that they can provide the correct information.
8. Make Video Fully Accessible
Videos are highly effective in getting information out to people. Unfortunately, for individuals with different physical and cognitive challenges, videos sometimes lose impact due to accessibility issues. One way to increase accessibility is the implementation of video players that are accessible using closed captioning and accessible controls such as the JWPlayer, which allows users to control normal video functions and closed captioning with the keyboard. Another tactic is the use of audio describe videos, where users have the ability to toggle between normal video and audio described video.There are plenty of other ways to increase website accessibility and make sites 508 compliant. Identifying potential trouble spots is but half the battle tools are an essential part of the processof making more accessible website content. However, it takes programmers and designers who know how to address human accessibility issues to implement successful website accessibility.