BCPS Accessibility Best Practices

  • The following information provides guidance on best practices to implement on your webpages to ensure accessiblity for all users. 
Expand All

  • Use clear and concise language

    There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately. Reminder Broward County Public Schools approved fonts are Century Gothic, Arial, and Helvetica. The text should be written at a 6-8 grade level. 

  • Do not rely on color to convey meaning

    Information on a webpage or document where color is used to convey menaning may not be available to a person who is colorblind and will be unavailable to screen reader users.

  • Provide appropriate hyperlinked text

    Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided. Every link should make sense if the link text is read by itself.

  • Provide headers for table

    Tables that are used to organize data should have appropriate table headers. Ensuring that tables have headers makes it easier for screen reader users to navigate and understand the data table.

  • Provide appropriate document structure

    Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

  • Provide appropriate alternative text

    Alternative text provides a descriptive text alternative to non-text content (such as pictures and images) in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

Expand All

  • Images Missing Alt Text

    Image Alt Text

    All images require an ALT attribute and this table provides a list of all pages that have images that are lacking this attribute. ALT text should explain the content or function of the image:

    • Describe the image in as few words as possible and still convey the meaning: alt="Golden Gate Bridge at sunset"
    • Please do not use the phrases "image of", "graphic of", "photo of", etc.

    This list displays the 5 top Image Alt Text Errors.  Make sure to scroll through the pages to see all the Image Alt Text Errors for your Site.

    For more information about alternative text, see:

  • Pages Without Text Alternative

    Linked Images Missing ALT Text

    Images that function as a link should have the purpose of the link as the alt text, and not a description of the image: alt="Login"

    Empty ALT text is not sufficient if the image is a link and nothing else is in the link with the image.

    This list displays the 5 top (Linked Images Missing ALT Text) Errors.  Make sure to scroll through the pages to see all the Linked Images Missing Alt Text Errors for your Site

    Need more help with alt text?

    See:

  • Non-Descriptive Link Text

    Non-descriptive link text

    Link text should clearly describe the destination. Vague link text, such as "click here", "read more", "link", "website", etc., does not adequately describe the destination.

    Linked text should make sense out of context. The general rule of thumb is to link keywords.

    This list displays the 5 top (Non-descriptive Link Text) Errors.  Make sure to scroll through the pages to see all the Non-descriptive Link Text Errors for your Site

    Keep in mind that screen readers navigate from link to link, skipping the surrounding text. They may read each link out loud, in sequential order.

  • Pages with Empty Headings

    Empty Headings

    Do not use empty headings to create whitespace.

    To fix this, simply delete the empty heading elements.

    This list displays the 5 top (Empty Headings) Errors.  Make sure to scroll through the pages to see all the Empty Headings Errors for your Site

    This page contains a short video that addresses how to fix this issue: Address Heading issues

  • Non-Structured Headings

    Unstructured Headings

    Usually, this happens when you have, for example, a Heading 3 in your page and someone hit the return key a couple of times after that Heading 3. Those empty paragraphs are also Heading 3's now, and that is confusing to screen reader users, who use headings to scan a page.

    This list displays the 5 top (Unstructured Headings) Errors.  Make sure to scroll through the pages to see all the Unstructured Headings Errors for your Site

    How to fix:

    Either delete the empty paragraphs, or go into source code and change the <h3> (or whatever level of heading it is) into a paragraph.

    Before: <h3>&nbsp;</h3>

    After: <p>&nbsp;</p>

    This page contains a short video that addresses how to fix this issue: Address Heading issues