DPUB Specific WCAG CSS Techniques

Charles LaPierre edited this page Mar 9, 2016 · 4 revisions

A11Y DPUB Techniques based on WCAG > DPUB Specific WCAG CSS Techniques

These WCAG Techniques are currently under review by the Digital Publishing Interest Group's Accessibility Task Force. Any changes marked are a draft and are NOT approved by the DPUB Accessibility Task Force and the WCAG Working Group

CSS Techniques

Technique Applies to DPUB Owner Comments
C6: Positioning content based on structural markup Yes Susann Moving content to the top, left, right, and bottom of containers with alignment
C7: Using CSS to hide a portion of the link text Yes A11Y Meeting 4/10/15 ? - I've never seen this. Short links?
C8: Using CSS letter-spacing to control spacing within a word Yes Susann Kerning
C9: Using CSS to include decorative images Yes A11Y Meeting 4/10/15 Background Images that go behind text or in container areas.
C12: Using percent for font sizes Yes A11Y Meeting 4/10/15 This allows the font size to grow according to your default font. You can set a default text font at 12pt and then all other fonts are a percentage of this. If you change the default, the whole document can change.
C13: Using named font sizes Yes Susann Directly assigning font sizes to headings and types of text.
C14: Using em units for font sizes Yes A11Y Meeting 4/10/15 Assigning font sizes in EM rather thatn PT Unclear - I would not think so. Just need one standard for font sizes.
C15: Using CSS to change the presentation of a user interface component when it receives focus Yes A11Y Meeting 4/10/15 Styling a unique experience by highlighting focused items in a special way. No - but this is a powerful customization that is constantly being used on the web
C17: Scaling form elements which contain text Yes Susann ? - Manual increase and decrease of a form field by the user to see more?
C18: Using CSS margin and padding rules instead of spacer images for layout design Yes Susann Spacer images shouldn't be used
C19: Specifying alignment either to the left OR right in CSS Yes Susann How is this different from C6?
C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized Yes Susann Set column min/max widths
C21: Specifying line spacing in CSS Yes Susann Leading
C22: Using CSS to control visual presentation of text Yes A11Y Meeting 4/10/15 Visual Presentation is unclear
C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content Yes A11Y Meeting 4/10/15 Style per sections of a page?
C24: Using percentage values in CSS for container sizes Yes Susann This can be used witih min/max width (C20) to create a resizable screen for different devices
C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors Yes Susann Borders can be applied to many objects and may be necessary for interactions. This is broad.
C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text Yes A11Y Meeting 4/10/15 This does not seem stylistic and can be also achieved with column widths and layout CSS, etc
C27: Making the DOM order match the visual order Yes A11Y Meeting 4/10/15 This needs further clarification. The DOM doesn't matter if the AT follows the visual order in another way.
C28: Specifying the size of text containers using em units Yes A11Y Meeting 4/10/15 em are not necessary but can be used. If it were easy to select em or pt, that might be nice.
C29: Using a style switcher to provide a conforming alternate version Maybe A11Y Meeting 4/10/15 I hate this idea. Make your 1 version right.
C30: Using CSS to replace text with images of text and providing user interface controls to switch Not Applicable A11Y Meeting 4/10/15

March 2016

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.