Here are some things you can do to make your site more accessible.

Images and Screen Readers

People with visual impairments may use screen readers when accessing websites. The following are some best practices for improving the experience someone using a screen reader will have with your site and with your email blasts:

• Always provide an image description and title
  • When you put an image into the content editor, you can access the image description and title fields in the General tab of the image setting pop-up box that appears when you click on the picture icon in the editor toolbar. 
  • The description text will go into the "alt-text" that is read by screen readers. Ideally this description gives all the meaningful detail in the image. Example: A group of LWV members standing behind a large banner sign. The sign has the text "Fair Maps"
  • The title field often appears as roll-over text--text that appears when you hover the mouse over the image or long press on the image on a mobile device. This should be a short description of the image.  (This is also a good place to put your image credit.) Example: Protesters at the Fair Maps Rally (credit: LWV of Maryland)

• Always include critical information in text format
  • If your image has text, make sure that text is available outside of the image. This is particularly important in event content where the image contains the details of the event. Best practice is to include any critical text as text content. 
  • If for some reason text details cannot be provided as part of the content, the text details should be included as part of the description so they can be picked up by a screen reader.
• Don't skip header levels when formatting your content
  • Header levels help the screen reader parse the content in a meaningful way. 
  • Example: If you select some text to format as Header 2, and you do a sub-heading underneath that head, that next level sub-head under it should be formatted as Header 3, not a lower level of header.
• If you use hashtags in online content, email, or in social media, capitalize each word in the hashtag.
  • Capitals will allow the screen reader to parse the combined words properly. Example: #FairMapsNow will be read as Fair Maps Now, while #fairmapsnow could be parsed and read as "fair map snow" or some other nonsense combination.

Language Translation

You can edit your theme files so that you can use Google's free text translation to set up a language dropdown that will auto-translate your site into specific languages, such as Spanish. Instructions for doing that are here.

Readability

Generally, body text is easier to read if it is in a sans-serif font (Lato). Headers are shorter, so they can be in either sans-serif or serif font (Merriweather).

Responsiveness

Responsiveness is how well your site adapts to different display sizes. NationBuilder themes are built to be highly responsive, so for the most part your content will work well on most devices. However, some choices you make when editing your themes or content may impact the experience on small screens, such as phone screens. You should generally check your content display on a mobile device to ensure the experience is reasonable.

Checking mobile display using a computer: Most browsers have an easy way to view content as if it were on a mobile device, so you can easily check how your content will display on a phone while you are working on it using the browser "Inspect element" feature. (Note: The instructions for Safari are more complicated, and are described here.)

• Preview or view the website page you want to check.
• Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.

• For Chrome, Edge, and other Chromium based browsers, a panel will open up on the right side of the browser. In Firefox, the panel will be at the bottom of the screen.

Chrome & Edge "Inspect" panel

Firefox "Inspect" panel

• Look for the phone/tablet icon on the top toolbar. On Chrome and Edge, it will be on the left side, while in Firefox it will be on the right side. Click this icon to switch between phone and computer screen views.

Making image and text combinations friendlier for mobile devices: When placing text and images together, you can use the advanced image settings to "float" the image next to the text. This allows the text to flow to the side of the image and then wrap around the bottom of the image to take up the entire width of the screen. (While you can also use a table to arrange the text and image, this usually puts a lot of white space on the smaller screen that makes for a harder reading experience.)

• In the image settings, click on the "Advanced" tab

.

• In the Style box, type "float: left;" (without the quotes) if you want the image on the left side of the text. Use "float: right;" if you want the image on the right side. To put a buffer between the image and the text, set the Horizontal Space value to 10 (or higher if you want more space). 

After you type, the information in the box will include your Horizontal Space in the style box automatically.

Try using the Inspect trick to view the following content in both computer and phone widths.

Example of what this looks like without left float or horizontal spacing:

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.

Example of what this looks like using left float and horizontal spacing:

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.

Example of what this looks like using a table:

(The borders of the table are left visible so you can see them in the example, and the image is centered horizontally and both image and text are both set to be aligned to the top of the table cell.)

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.