The following information is provided to help M-DCPS (Miami-Dade County Public Schools) webmasters understand and use our District's guidelines for Web accessibility and design. The Americans with Disabilities Act (ADA) mandates ADA compliance and these guidelines will address the requirements.
As such, all M-DCPS documents and websites will meet a minimum AA rating, and AAA wherever possible of the Web Content Accessibility Guidelines (WCAG) 2.1
Web page – an Internet-based document, usually in HTML format, that can contain a wide variety of information and multimedia content
Website – a collection of web pages that is hierarchically organized around a homepage
Web Browser – a computer program that downloads web pages. It is the program installed on a computer that a person uses to access web pages on the Internet.
HTML – short for “hypertext mark-up language,” a common mark-up language used to present web pages. It tells the web browser how information should be structured and accessed.
HTML Tags – specific instructions understood by a web browser or screen reader. One type of HTML tag, called an “alt” tag (short for “alternative text”), is used to provide brief text descriptions of images that screen readers can understand and read out loud. Another type of HTML tag, called a “longdesc” tag (short for “long description”), is used to provide long text descriptions that can be read out loud by screen readers.
Refreshable Braille Display – an electronic device that translates standard text into Braille characters and uses devices such as rounded pins on a refreshable display to create Braille text that can be read by touch
Screen Reader – a computer program that reads out loud written text. It allows a person to listen to the written text on a web page or in a computer program. Screen readers read only text; they cannot describe pictures or other images, even if the images are pictures of text.
An important aspect of color for both low vision and color-blind users is sufficient contrast between foreground (text or graphics) and the background.
Aa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sem erat, molestie vel nisi eu, malesuada congue nulla. Vestibulum ultrices, risus non lacinia luctus, dolor neque finibus justo, vel vehicula dui urna sed massa.
Do
Aa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sem erat, molestie vel nisi eu, malesuada congue nulla. Vestibulum ultrices, risus non lacinia luctus, dolor neque finibus justo, vel vehicula dui urna sed massa.
Don't
The colors shown in the example below meet the minimum contrast requirements. Several online tools are available to help determine if the colors meet the minimum criteria.
Example of an Accessible Color Palette. See more information at: https://toolness.github.io/accessible-color-matrix/
Proper and consistent application of typography across all products is an important part of conveying both legible and clear messaging to promote and maintain its readability.
A typeface (also known as font family) is a set of one or more fonts that shares common design features.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Merriweather was designed to be a text face that is pleasant to read on screens. It features a very large x height and has slightly condensed letterforms.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.
Like Attracts Like - Pairing fonts with completely different personalities will elicit confused signals. The two can be stylistically contrasting, but emotionally they should serve the same message.
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. Etiam nec risus at odio dapibus porta sit amet aliquet diam.
Do
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. Etiam nec risus at odio dapibus porta sit amet aliquet diam.
Don't
Keep it in the Family - The simplest solution is often the best. Sometimes the best pairings come from using variations (serif, alternate weight, slab) within the same font-family.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec risus at odio dapibus porta sit amet aliquet diam. Maecenas finibus orci orci, eget aliquam urna ullamcorper non. Etiam viverra suscipit est sed maximus. Aenean placerat auctor sapien.
Do
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec risus at odio dapibus porta sit amet aliquet diam. Maecenas finibus orci orci, eget aliquam urna ullamcorper non. Etiam viverra suscipit est sed maximus. Aenean placerat auctor sapien.
Don't
Avoid setting body copy at less than 14 pixels. Use large headlines to convey warmth.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis rhoncus enim. Donec fermentum dolor metus, at congue ex auctor et.
Body copy 14 pixels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis rhoncus enim.
Body copy 16 pixels
Do
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis rhoncus enim. Donec fermentum dolor metus, at congue ex auctor et. Cras magna tellus, congue aliquet porttitor et, volutpat vel metus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body copy 10 pixels.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis rhoncus enim. Donec fermentum dolor metus, at congue ex auctor et. Cras magna tellus, congue aliquet porttitor et, volutpat vel metus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body copy 12 pixels.
Caution
Example of graphic image from Freepick.com
Example of alt text:
alt=”cartoon of three children jumping with joy”
Example of photo image from Miami-Dade County Public Schools
Example of alt text:
alt=”three ballerinas dancing on stage”
Web images include graphics and photos and must have text equivalents written in the HTML code. A text equivalent is written text that describes the image. Because the text description is written in the HTML code, it is not visible on the web page, but can be read by screen readers for people with disabilities.
Add an “alt” attribute for brief text, to each photo and graphic on your website.
Example:
<img src="smiley.gif" alt="Smiley face">The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Tip: To create a tooltip for an image, use the title attribute!
Guidelines for the alt text:
Add "longdesc" for a long text descriptions of an image (photo and graphic) on your website.
Example:
The longdesc attribute specifies a hyperlink to a detailed description of an image.
Possible values:
To use images or graphics from others, you must own or request the copyright permissions.
Any photo of a student published on the Web must have a corresponding release form on file at the school where the student attends.
All video files should be uploaded and stored on a District's TV portal www.dadeschools.tv.
In order to upload videos to dadeschools.tv, your site administrator must submit a HEAT ticket to Internet Services to request a channel and identify a person as the designated channel manager.
The video file must be given a title and short description before uploading.
Example of Dadeschools TV portal - Asset Upload section to add Title and Description.
All uploaded videos must have Closed Captioning (CC) added to the video file. This can be done by selecting the Closed Captioning option at the time of upload.
Example of Dadeschools TV portal - Asset Upload section to add Automatic Caption.
Videos must be published by adding a direct link to the video or embedding the video on the web page.
Example of an embeded video.
Any document file uploaded and/or posted on a website must be in a PDF file format.
All non-PDF files (e.g., Word documents, Excel files, PowerPoint files, etc.) must be converted to PDF file format.
Documents scanned and converted to a PDF format are not permitted.
All PDF files must not be larger than 20MB (megabyte) in file size.
A link to the FREE download of Adobe® Acrobat Reader should be provided on the website to ensure viewers can open PDF files from the web page.
Miami-Dade County Public Schools offers website templates to assist schools and District offices in building websites quickly and easily without the need of a Web designer. In addition, the website templates are responsive, adhere to our M-DCPS Web standards, and follow the national Web Accessibility Guidelines.
The Website Management System (WMS) is a web-based website builder/template offered to school district offices to build and manage their own websites. The WMS offers features such as staff directories, calendars, and unlimited web pages that can be turned on or off. To request a website template for your department, please submit an Internet Service Request.
The School Mobile App was originally designed as a mobile version of a school's website, and today has evolved into the School Website Template. Schools may request access to the SMA to build a new school website and/or to build a mobile version of their website so that it appears on the Dadeschools Mobile App. To start using the SMA, the school principal logs on to the District portal and clicks on the SMA app link under the Apps | Services | Sites tab.
The application of responsive technology is highly recommended to automatically adapt the layout of the website content or aplications to any screen size. Screen size and resolution have to be considered for the user experience when visiting the website.
Example of a responsive website in different screen sizes.
The content should properly display on different screen sizes (desktop, laptops, tablets, and phones).
The content should be organized to be easily read and understood.
Your website should view correctly on all popular web browsers: Chrome, Microsoft Edge, Firefox, Opera, and Safari.
Web-based accessibility tools can be used to help determine the level of ADA compliance for your website. Several can be added to your favorite web browser as a plug-in, while others can be found as stand-alone tools.
Some examples include:
