4.9: Developing Organization Accessibility Guidelines
- Page ID
- 32681
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)To ensure consistency in the accessibility of the company’s digital content, the accessibility committee has decided there needs to be a set of simple guidelines staff can follow. You start by creating three guidelines:
- Web Development Accessibility Guidelines
- Web Content Accessibility Guidelines
- PDF Accessibility Guidelines
Web Development Accessibility Guidelines
Though you could just have your developers review WCAG to understand what needs to be done to ensure the company’s presence on the Web is accessible to everyone, there would be a great deal of “interpretation” required, and many aspects of WCAG that may not be relevant. Instead, you may want to identify the specific issues that need to be addressed in the company’s websites, and develop a set of guidelines specific to those issues.
Use the 10 Key Guidelines [PDF] as your starting point. These guidelines can be distilled to create a brief list of issues developers must keep in mind when developing for the Web. These guidelines might be as follows, though depending on the organization, may require minor adapting to fit its needs. They should be easy to learn and memorize.
- All images must have an alt attribute that describes the meaningful elements of the image, or the alt attribute is left empty if the image is decorative or otherwise meaningless.
- All multimedia content with meaningful dialogue must have captions (video) or a transcript (audio).
- Content with meaningful sections or topics must be structured using properly sequenced HTML headings.
- If a series of items looks like a list, use proper list markup to format those items.
- Where data is being presented in a table, the first row (and sometimes the first column) should be formatted as proper table header cells (i.e., <th>).
- Ensure that when navigating through web content using the Tab key, the cursor moves from left to right, top to bottom, and does not veer from that pattern.
- Ensure that the cursor’s focus is easily visible when navigating through elements of the page with the Tab key.
- When using colour to represent meaning, ensure that something other than colour also represents that meaning.
- Ensure that contrast between foreground (text) colours and background colours provide sufficient contrast, at a ratio of 4.5:1 minimum for smaller text, 3:1 for larger text.
- Ensure that all features that operate with a mouse, also operate with a key press.
- Provide ways to skip past repetitive content using bypass links and ARIA landmarks.
- Ensure that link text describes what would be found if the link were followed.
- Ensure that accessible error or success feedback is provided after completing an action such as submitting a form or logging in, typically using the ARIA alert role with the element containing the feedback.
- Ensure that all form fields are explicitly labelled using the HTML Label element.
- Ensure that all functional elements whose operation is not immediately obvious, includes instructions on how to use them.
- Describe the accessibility features of an application or website, and position a link to those details in the interface that will be easy to find for assistive technology users.
Web Content Accessibility Guidelines
The Web content accessibility guidelines will be very similar to those for web development listed above, though differing in that content typically tends to be less interactive than a user interface. As such, these guidelines focus more on the accessibility aspects of content.
- All images must have an alt attribute that describes the meaningful elements of the image, or the alt attribute is left empty if the image is decorative or otherwise meaningless.
- If images cannot be effectively described in alt text of 125 characters or less, provide a full description in the surrounding text, with a short description and a reference to the full description in the alt text.
- Avoid using images of text, and where unavoidable, reproduce the meaningful text of the image as actual text in the image’s surroundings.
- All multimedia with meaningful dialogue must have captions (video) or a transcript (audio).
- Content with meaningful sections or topics must be structured using properly sequenced HTML headings.
- If a series of items looks like a list, use proper list markup to format those items.
- When using colour to represent meaning, ensure that something other than colour also represents that meaning.
- Ensure that contrast between foreground (text) colours and background colours provide sufficient contrast, at a ratio of 4.5:1 minimum for smaller text, 3:1 for larger text.
- Where data is being presented in a table, the first row (and sometimes the first column) should be formatted as proper table header cells (i.e., <th>).
- Ensure that all form fields are explicitly labelled using the HTML Label element.
PDF Accessibility Guidelines
PDF accessibility guidelines are similar to web content accessibility guidelines, though there are PDF specific requirements such as reading order, reading language, and document tagging that also need to be addressed to create an accessible PDF. Documents are typically created with Microsoft Word, saved as a PDF, then opened in Adobe Acrobat Pro to adjust the document’s accessibility.
- When creating a Word document to be converted to PDF, use proper headings to organize sections/topics in the document.
- When creating a Word document to be converted to PDF, ensure all images have alt text describing the meaningful elements of the image.
- When creating a Word document to be converted to PDF, ensure that any document with data tables have the “Repeat as header row at the top of each page” option checked in the table properties.
- Use the Windows version of Word 2010+ to save Word documents as PDF with the “Document structure tags for accessibility” option checked when saving. (This is not supported on Macs.)
- Use the Make Accessible tools of the Action Wizard in Adobe Acrobat Pro 11+ or Acrobat Pro DC to assess the accessibility of the converted Word document, and make accessibility adjustments.
- Use the Reading Order tool in the Acrobat Pro toolbar on the left to arrange the elements in the PDF in a logical reading order.