Skip to Content Skip to Footer Accessibility Concerns

Website Editor Guidelines

All pages on dysart.org must maintain a similar layout and appearance. In order to facilitate that goal, every page will need to go through an approval process.  You can save a page you are working on by clicking on Draft. Please click on Draft often to save your progress. You can continue editing your page by clicking on Edit on the View Draft page. Once you are ready to submit your page for approval you can click on Submit


Here are some guidelines to help you in creating your page


Empty Pages
Pages should not be empty with only links. There should be a short description introducing the links or giving the user contact information on who to connect for questions. This gives the user a better experience when browsing the website.
 
Dysart Unified School District is located in Surprise/El Mirage Arizona. Below is the link to the website.
 
good design sign


Image Sizes
When uploading images to a page, they should not be wider than 1400px and not be taller than 1000px. Please resize any large images before uploading.  Windows' MSPaint can be used to resize an image.


Image Content
All photographs of children posted on the website need to be taken/approved by the Dysart Educational Media Coordinator. This requirement is to ensure compliance with district guidelines concerning non-confidential student information.


Image Hosting
All images should be uploaded to your pages and be aware of the copyright of each image. Images hosted on external websites will not be allowed.  Do not search Google images for images to use.  If you need an image and do not have any that Dysart maintains a license for, please contact the Dysart Educational Media Coordinator.  


Embedded Flash Objects
In order to present the same experience on different devices, the embedding of flash objects will not be allowed.  This limitation will include the embedding of videos and photo slideshows.


Fonts and Colors / Text Contrast

Custom fonts and colors are not allowed in pages.  This is to keep a consistent experience across all pages.  Keeping consistent text contrast is a key for maintaining a high level of web accessibility.


Sentences Ending with Links
It is best to not end a sentence with a link. The readability is decreased due to the period after the link.  Functionally the period may be included in the link, giving the user a bad link.  The period may be included if a user copies the link. Better is to replace the link with a description or move the link to a separate line.
 
In this example, we will end this sentence with a link that includes the period in the link http://dysart.org/.

This example sentence has the period outside of the link, but still at the end of the sentance http://dysart.org/.
bad design sign
Better is to replace the link with text Dysart Unified School District. Another way is to put the link on another line for emphasis.

 
good design sign


Anchor Text on Links
When links are posted, the anchor text should be changed to something human readable. Keeping the https:// results in a poor experience. This helps increase the accessibility of your page.
 
Here is the link to the website guidelines https://www.dysart.org/Sites/default.aspx?pgid=185

bad design sign
Better is to replace the link with text Website Guidlenes. Another way is to put the link on another line for emphasis.

 
good design sign


Alternative Text
All images on your pages must have the alternative text field.  Adding alternative text for images is the first principle of web accessibility. Sometimes a blank entry in the alternative text field is appropriate. Pages will not be approved that have images missing the alt text field. For some examples, please see the below link.
 
Where to add Alternative Text in the website Editor


Accessible Documents
All documents on the dysart.org website must be accessible. Making content accessible to people with disabilities online begins with making files compliant from the start.  This page from U.S. Department of Health & Human Services explains how to check if different document types are accessible.

Capitalized Text
SENTENCES IN ALL CAPITAL LETTERS SHOULD NOT BE USED IN THE PAGE. Capital letters decreases the readability of text and is considered shouting.



Fluid Blocks
Div's with display:inline-block are preferred to tables for horizontal layouts. They give the content a fluid layout. This means that it responds well when the browser window is at different sizes. They can be easily added to pages using the Insert Fluid Box icon Insert Fluid Block example icon
 

Heading Styles
The heading styles should only be used for headings. They shouldn't be used for sentences.

 
This is an example of Heading 2 text inline with other text. The inconsistent text size makes it more difficult for users to scan the page for information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus a mauris eu volutpat. Sed a imperdiet sem. Vivamus imperdiet diam ut adipiscing ultrices. Cras mi risus, elementum ut lectus a, cursus euismod sem. Integer a commodo metus. Morbi at velit ut enim molestie posuere ac et risus. 
bad design sign
Section Heading

A section heading separate from the paragraph helps increase the readability of the page. Users can scan the headings better to find specific information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

good design sign



 
Using too much bold can also decrease readability. In this example too much text was bolded. It is harder to direct the user to a specific point they should look at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus a mauris eu volutpat. Sed a imperdiet sem. Vivamus imperdiet diam ut adipiscing ultrices. Cras mi risus, elementum ut lectus a, cursus euismod sem. Integer a commodo metus. Morbi at velit ut enim molestie posuere ac et risus.
bad design sign
If bold is used to draw attention to a specific point it can be much more effective. A user scanning a page is more likely to read the information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus a mauris eu volutpat. Sed a imperdiet sem. Vivamus imperdiet diam ut adipiscing ultrices. Cras mi risus, elementum ut lectus a, cursus euismod sem. Integer a commodo metus. Morbi at velit ut enim molestie posuere ac et 

good design sign



Multiple Emphasis Methods
When using emphasis on your text (bolditalics, • bullets, Headings), it is best to only use one. Within a larger body of text, a piece in italics does not stand out much; instead, it signifies a context difference only while the text is being read. By contrast, a single word in boldface attracts the human eyeball and is therefore recommended for keywords the reader might be looking for.

 
Using bold  and italics together creates an odd experience for the user. It becomes harder to read and to distinguish which is the emphasized portion  of the text.
bad design sign
Use the emphasis methods sparingly. It help the user to better understand the text they are reading. Bold should only be used to attract the users attention to a specific point.

good design sign
 
Likewise the use of bullets needs to be considered
  • Bullets combined with Bold give the user an odd experience
  • Both are used to specify important points
  • But either one is acceptable
bad design sign
It is better to use bold with indention or just bullets
Option One text description
Option Two text description
Option Three text descriptionn
 
  • Option One text description
  • Option Two text description
  • Option Three text descriptionn

good design sign

Text Alignment 
In order to provide a similar layout and appearance, please keep your text left aligned. Center text should only be used on short items, not paragraphs.

 
Centering too much text decreases the readability of the section. Centering should only be used on small amounts of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus a mauris eu volutpat.Sed a imperdiet sem. Vivamus imperdiet diam ut adipiscing ultrices. Cras mi risus, elementum ut lectus a, cursus euismod sem. Integer a commodo metus. Morbi at velit ut enim molestie posuere ac et 
bad design sign
When centering is used on a specific point or link, it can attract the users attention without being overwhelming.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus a mauris eu volutpat. Sed a imperdiet sem. Vivamus imperdiet diam ut adipiscing ultrices. Cras mi risus, elementum ut lectus a, cursus euismod sem. Integer a commodo metus. Morbi at velit ut enim molestie posuere ac et 

good design sign





Keep it Simple
The fewer lines and indents you use, the easier it will be to make a page readable and accessible by our parents and staff.

 


Accessibility Requirements
Per the Americans with Disabilities Act and adopted web standards for public institutions, we must adhere to accessibility guidelines.  
Most of these are taken care of for CMS users by Dysart IT's implementation of dysart.org, but some of these requirements are everyone's responsibility. 


For full details, please refer to the W3C QuickReference:


The following list includes but is not limited to, some of the specific items our users can influence.

1.1.1
All non-text content that is presented to the user has  a text alternative.  Image content must be present in the image's ALT tag.  
This can be found within the image properties when adding or updating an image in the CMS.

1.2.2
All videos need captions. - Embedded videos must be uploaded to YouTube only and appropriately captioned.

1.3.1
Sequencing/Structure of content -- tables must have programmatically-legible headers (), info should be structured for easy consumption in logical order.

1.4.1
Use of Color: Color should not be the ONLY way to distinguish differences in data. For instance: In a table or on a calendar, patterns and text emphasis should be combined with color cues.

1.4.3
Contrast ratio - The CMS enforces good contrast ratios for text, but images that include text must use a heavily-contrasting text color.

1.4.9:
No images of text.  Incidental text (signs in a background, etc) is not in violation, but flyers, graphics, posters, etc are not accessible to screen-readers.

2.4.3
TabIndex should not be used on a page to subvert the order of keyboard navigation. 

2.4.4 
Links must be named clearly, and not part a sentence.  Do not simply use the URL as a link text.

2.4.6
Use headings and labels to seperate sections of your pages and help create blocks of related information.

3.2.2
If you use target=”_blank” to open links in a new window, you must tell the user beforehand that the link will do so.
 

PDFs, Docs, etc must be designed with accessibility in mind; most of the principles on this page can assist this goal.