FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

ranti/accessiblefuture: Notes and code samples for Accessible Future workshop. · GitHub

/ accessiblefuture Public
forked from AccessibleFuture/webdesign-accessiblefuture
BranchesTags
 
 

Repository files navigation

HTML, CSS, and Accessibilty

* Humans are responsible for using these in accessible ways.
* Easy to make accessible web pages; more work to make them inaccessible.
* Always ask: What do these design/development decisions do for
accessibility?

What is HTML?

* A markup language to add structure and meaning to documents.
* Helps a browser read/interpret a document
* Helps other tech understand/interpret your document.
    * #1 user of your site has no arms, legs, eyes, ears, etc: Search Engines

<!-- A HTML comment -->

<tagname attribute="value">Tag content</tagname>

<tagname attribute="value"/>

What is CSS?

* A style language to government presentation of specific parts of a
  document.
* Helps a browser display a document
* Separation helps you establish rules to use across documents.
* Selectors help you pick specific parts of a document for styles

/* A CSS Rule */

selector {
    property: value;
}

  • How do you use them together?

    • Separation of powers: HTML for structure, CSS for presentation

  • Accessibility and HTML

    • Simple page structure

      • Semantics
      • Aria roles

    • Multimedia

      • Images
      • Video
      • Audio

    • Navigation

      • Nav
      • role="navigation"

    • Forms

      • Good markup
        • LABELS!!!!
        • textarea
        • input
          • text
          • email
          • telephone
          • search
        • attributes
          • placeholder
          • required

  • Accessibility and CSS

    • Link styling

    • Hiding content

      • display:none;
      • visibility: hidden;
      • better CSS to hide content visually but keep accessible.

    • Colors and Contrast

    • Typography

      • Web fonts instead of images of text
      • Google web fonts

    • Layouts for various devices and screen resolutions = Media Queries

    • Separate CSS = possible to provide alternative style sheets

Advanced Topics and Tools

  • Platform/browser sniffing, capability sniffing is in!

    • Modernizr helps you test browser support for specific features.

  • CSS resets and normalization

    • Eric Meyer's CSS Reset
    • Normalize
    • Good ol' * {margin:0; padding:0;}

  • CSS Preprocessors

About

Notes and code samples for Accessible Future workshop.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

Back | FazBrowse Home | New Git URL