About Theme flower

Theme Flower's Features And Specifications

I think you can use in many site, If you change picture and text.

It's shipped with Sample Content.

May be Can easily build accessible site, if You install theme with Sample Content.
(You must to described src="image's root" alt="image of description", if image part is html block.)

It use drawer menu with WAI-ARIA, In the width less than 1165px.
(I improve it for more accessible.)

Keyboard focus move in the only global navigation to select menu or "×" button, When open the drawer menu.

It's use Microdata for machine readable Schema.org.

It's markups global navigation,breadcrumb list,what's new,q&a, according to the specifications of schema.org.

In the case of English, Depending on the number of characters, due to the specification of the design, the navigation items will be up to six. And due to the specification of the design, the number of characters of the site name will be a maximum of 6 characters.

Fixed header for possible to quickly touch the navigation menu when the scroll in the smartphone.
(Please set (Case jump destination is #top.)example:margin-top:100px;padding-top:100px;) When You set link in page.)

Please note that the layout is likely to collapse or get an horizontal scroll bar by device smaller than it, If there is absolute in width of LikeBox etc.
(Please adjust the width on your own.)

The Main Area has been to 2 column (Col Twobox) 3 column (Col Threebox) can to set original custom layout.

About Accessibility Conforms of Theme Flower

Text color contrast ratio with the background color conforms the criteria (level AA) 1.4.3 of WCAG 2.0.

It conforms success criteria for keyboard operation the criteria (level A) 2.1.1 of WCAG 2.0.
(Accordion and tab menu parts of jQuery UI move with the arrow keys.)

This theme have set up a navigation skip.
(It is displayed by pressing the Tab key after displaying the page.)

Opening and closing button (icon) part of drawer menu has displayed visual 「menu」and 「close」by the css, has been set to read "navigation menu" by the screen readers.
A element use as Button element provides information by using the WAI-ARIA.

The state of the opening and closing of the drawer menu provides information using the aria-expanded attribute.

In the screen reader that support to the aria-expanded attribute, It reads "folded" or "expaned" when you focus on opening and closing button.

Does not read in screen readers and visually no display when global navigation are closed (use drawer menu) .
And the indicates not displayed to using aria-hidden="true".
It has created a clone at the page bottom when global navigation are closed(use drawer menu) does not read in screen readers and visually no display.
Clone is read with screen readers, but does not appear in the visual.

Version 1.2.0  in this theme add accessible dropdown menu with WAI-ARIA to global navigation when screen size is 1165px or more. (Supports up to the second hierarchy level(one sub menu))

Version 1.1.0 in this theme added aria-current attribute to the menu selected in the global menu.
And Version 1.2.1 in this theme added aria-current attribute to the menu selected in the breadcrumb.

It provide with the information of the elements of the role and status, It use the WAI-ARIA the tab menu and accordion UI for be accessible.(jQuery UI - v1.11.4)

About Confirmation Display

concrete5 7.5.6~5.7.5.8, 8.0.0~8.3.2

  • OS:Windows 7
    Browser:
    • Internet Explorer11,10,9(include when zoom 200% and text size "large", "maximum" and High Contrast Mode)
    • Firefox46.0(include when  zoom 200%  and change only text size×5 and High Contrast Mode)
    • GoogleChrome50.0.2661.94(include when  zoom 200% and High Contrast Mode)
    • Opera36.0.2130.65(include when  zoom 200%)
  • OS:Windows 10
    Browser:
    • Edge(include when zoom 200%)
    • Firefox46.0(include when  zoom 200%  and change only text size×5)
    • GoogleChrome50.0.2661.75(include when zoom 200%)
  • OS:Mac OS X 10.10.5
    Browser:
    • Safari9.0.3(include when  zoom 200%  and change only text size×3)
    • Firefox46.0(include when  zoom 200%  and change only text size×5)
  • Tablet:
    • iPad iOS 9.3.1 Safari
  • Smartphone:
    • GALAXY Android5.0.1 Standard browser、GoogleChrome50.0.2661.89
    • iPhone5s iOS 9.3.1 Safari

About Check Reading Of The Screen Readers

  • PC-Talker 7 + Win7 Internet Explorer11
  • NVDA 2015.4jp + Win7 Firefox46.0
  • Voice Over + iPad iOS 9.3.1
  • TalkBack4.4.1 + GALAXY Android5.0.1

Have To Fix Other Than The Theme

Change from %1$s :: %2$s to %2$s :: %1$s on line 868 in concrete/config/concrete.php.

Please refer to it - How to change the default "site name :: page title" formatting in 5.7

You don't need change from concrete5 Ver.8. Because it set [PAGE NAME :: SITE NAME] by default.
Please refer to it - Switch Site name and page title on default by katzueno · Pull Request #3801 · concrete5/concrete5 · GitHub

About Block Custom Classes

  1. image-circle - The image on the round.
  2. imagelink-circle - The image on the round, and give transparent red by hover.
  3. imagelink-circle-s - Small versions of imagelink-circle.(The size of the Facebook icon in the footer.)
  4. imagelink-square - Give transparent red by hover.
  5. image-frame - Add the border, such as the frame in the image
  6. left-justify - It is aligned left in the article, etc.(wraparound of text)
  7. flower-title - Same to h2 style of the top page.

About Area Custom Classes

Main AREA

  1. list-mark - Add an icon, such as the list of What's New in the top page.
  2. flower-btn - Pink button style.

Footer Nav AREA

  1. subnav-link - To side-by-side.
  2. list-mark - Add an icon, such as the list of What's New in the top page.
  3. flower-btn - Pink button style.

About Custom Templates For Block

  1. flower_responsive_header_navigation - Use autonav for global navigation.
  2. flower_breadcrumb - Use autonav for breadcrumb navigation.
  3. flower_new_info - Use page list for what's new.
  4. flower_list - Use page list for side block of blog pagetype.
  5. flower_thumbnail - Use page list for page list with a thumbnail for side block of blog pagetype.
    (please set the thumbnail in the composer's blog entry page type of the management screen for display the thumbnail image.)
  6. flower_faq - Use faq for f&q's accordion parts.
  7. flower_page_title - Use page title for page title parts.
  8. flower_blog_title - Use page title for blog title parts.
  9. flower_search - Use search for side block of blog pagetype.
  10. flower_date_navigation - Use date navigation for side block of blog pagetype.
  11. flower_next_previous - Use next previous for side block of blog pagetype.
  12. flower_topic_list - Use topic list for side block of blog pagetype.